<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="../../../firefly_debug.js"></script>
	<script type="text/javascript" src="ImgCropper.js"></script>
	<script>
	var cropper;
	$Ready(function(){
		cropper = new ImgCropper({url: 'test.jpg', options : {width: 100, height:144}});
		$XEvent.addListener('sliderLeftImage', 'click', function(){cropper.zoomIn()});
		$XEvent.addListener('sliderRightImage', 'click', function(){cropper.zoomOut()});
		$XEvent.addListener('imageFile', 'change', function(){cropper.setURL($('imageFile').value)});
		$XEvent.addListener('saveImage', 'click', function(){
			alert($Firefly.objToParamString(cropper.getOutputParams()));
		});
	});
	
	function ShowSize(file) { 
		var s = file; 
		if(s == "")
			return 0; 
		var img = new Image(); 
		img.src = s;
		
		return Math.round(img.fileSize/1024); 
	}
	
	function CheckFileName(file){
		if(!/\.(bmp|jpg|png)$/i.test(file)) {
			alert('请选择格式为bmp、jpg、png、gif文件。');
			return false;
		}
		
		return true;
	}
	
	function dd(){
		alert(ShowSize($('imageFile').value));

	}
	
  </script>
  <style>
		body{
			font-size:12px;
		}
		
		table {
			border:1px solid navy;
			border-collapse: collapse;
		}
		
		td {
			border:1px solid navy;
		}
		
		#eyeDiv{
			border:1px solid gray; 
			overflow:hidden;
			position:absolute;
		}
		
		#bgDiv{
			overflow:hidden;
			border:1px solid #000;
			position:absolute
		}
  </style>
</head>
<body>
<table>
	<tr>
		<td style="width:80px;">选择文件</td>
		<td style="width:252px;">
			<form>
				<input type="file" id="imageFile"></input>
			</form>
		</td>
	</tr>
	<tr>
		<td>预览</td>
		<td>
			<div id="bgDiv" style="width:250px; height:300px;">
				<div id="eyeDiv"></div>
			</div>
			<div style="height:302px;"></div>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
			<div style="height:20px;text-align:center;">
				<img src="_h.gif" onmouseover="this.src='_c.gif'" onmouseout="this.src='_h.gif'" id="sliderLeftImage" style="margin-top:5px;" alt="缩小"/>
				<span id="Slider"></span>
				<img src="+h.gif" onmouseover="this.src='+c.gif'" onmouseout="this.src='+h.gif'" id="sliderRightImage" style="margin-top:5px;" alt="放大"/>
			</div>
			<div style="text-align:center;margin-top:4px;">
				<input type="button" value="保存图像" id="saveImage"></input>
			</div>
		</td>
	</tr>
</table>
</body>
</html>
